<template>
    <div class="setting-container">
        <el-tabs v-model="state.activeTab" class="tabs">
            <el-tab-pane label="字段属性" name="fieldProperty">
                <field-setting
                    :designer="designer"
                    :form-config="formConfig"
                    :select-widget="selectWidget"
                    :scroller-height="state.scrollerHeight"
                />
            </el-tab-pane>
            <el-tab-pane label="表单属性" name="formProperty">
                <form-setting 
                    :designer="designer"
                    :form-config="formConfig"
                    :scroller-height="state.scrollerHeight"
                />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="ts">
import { reactive ,watch,onMounted,onUnmounted,nextTick, provide} from 'vue';
import { throttle } from 'lodash-es';
import formSetting from './formSetting.vue';
import fieldSetting from './fieldSetting.vue';

const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    formConfig:{
        type:Object,
        default:()=>({})
    },
    selectWidget:({
        type:Object,
        default:()=>({})
    })
})

const state = reactive({
    activeTab: 'fieldProperty',
    scrollerHeight:'0px',
    formTemplateList:[],
})

const setScrollHeight = throttle((e)=>{
    nextTick(()=>{
        state.scrollerHeight = e.target.innerHeight - 115 + 'px'
    })
},300)

onMounted(()=>{
    state.scrollerHeight = window.innerHeight - 115 + 'px'
    window.addEventListener('resize',setScrollHeight)
})
onUnmounted(()=>{
    window.removeEventListener('resize',setScrollHeight)
})
</script>

<style lang="scss" scoped>
.setting-container{
    :deep(.el-tabs){
        .el-tabs__nav{
            width: 100%;
                .el-tabs__item {
                width: 50%;
            }
        }
    }
}

</style>
